iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 29
0
自我挑戰組

React 30 天學習歷程系列 第 29

【Day 29】適合和 React 搭配的第三方套件

  • 分享至 

  • xImage
  •  

lodash

lodash 是一個 JS library,它提供了很多函式讓開發者可以更方便的去處理 JS 中的 arrayobject,有時候效能甚至比原生 JS 好,而且套件本身也很輕量。lodash 的安裝方法如下:

$ npm i -g npm
$ npm i --save lodash

安裝後就可以 import lodash 的函式,如下面使用 get,這個函式可以獲得物件裡面的屬性。如果是用原生 JS 的寫法,我們必須先判斷有沒有 data 再判斷有沒有 hobby,最後才取得 sports,但是透過 lodash 的 get,我們就可以寫得非常簡便。另外也有一些簡易的判斷函式,如 isArrayisObjectisEmpty 都很容易使用。

import React from 'react'
import { get, isArray, isObject, isEmpty } from 'lodash'

const UserProfile = () => {
    const data = {
        name: 'leo',
        age: 30,
        hobby: {
            sports: 'climbing'
        }
    }
    
    console.log(isArray(data)) //false
    console.log(isObject(data)) //true
    console.log(isEmpty(data)) //false
    
    return <div>
        <div>{ get(data, 'hobby.sports') }</div>
        <div>{ data && data.hobby && data.hobby.sports }</div>
    </div>
}

date-fns

date-fns 是一個用於處理 JS 日期時間的套件,它是基於 JS 原生的日期方法做處理,雖然輕量卻能支持相當多功能,像是 i18n、TypeScript 等。
安裝方法:

npm install date-fns --save
// or
yarn add date-fns

date-fns 本身提供不少函式處理日期時間,如下面我們使用 date-fns 的 format 函式來轉化 new Date 成我們想要的格式,相當簡單好用。

import React from 'react'
import { format } from 'date-fns'

const UserProfile = () => {
    
    return <div>
        { format(new Date), 'YYYY/MM/DD'}
    </div>
}

Ant Design

Ant Design 是螞蟻金服開源的 UI 庫。
安裝方式:這邊是直接使用官網介紹搭配 create-react-app 的安裝方式

$ yarn create react-app antd-demo

# or

$ npx create-react-app antd-demo

安裝後就能直接 import,使用 Ant Design 的元件。若是要使用 CSS 樣式,必須在頂層元件中引入 'antd/dist/antd.css',範例中為了方便才直接在一般 component 中引用。Ant Design 的元件大都有自訂的屬性,方便我們去更改樣式,另外也會提供不少 API,讓我們在製作功能互動上更為方便。

import { Button } from 'antd';
import 'antd/dist/antd.css'

const UserProfile = () => {
    
    return <div>
        <Button type="primary">
          Hello World~!
        </Button>
    </div>
}

Material-UI

Material-UI 是基於 Google material 風格的 UI 套件,
安裝方式:

// 用npm安装
npm install @material-ui/core

// 用yarn安装
yarn add @material-ui/core

Material-UI 使用上相當簡便,如下面我們直接引用 Button、及 Link 元件,元件裡面就有包含 Material-UI 預設的 CSS 樣式。Material-UI 的元件當中會提供一些屬性和方法,方便我們再去做客製化。

import Button from '@material-ui/core/Button';
import Link from '@material-ui/core/Link';

const UserProfile = () => {
    
    return <div>
        <Button variant="contained" color="primary">
          Hello World~!
        </Button>
    </div>
}

上一篇
【Day 28】React Hook(五): 自定義 Hook 及 使用 Hook 的一些規則
下一篇
【Day 30】感言
系列文
React 30 天學習歷程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言